<template>
  <div>
    <!--    @on-ok="ok"-->
    <!--    @on-cancel="cancel"-->
    <Modal
      v-model="showStatus"
      title="分配资源信息"
      @on-cancel="cancel"
      :loading="loading"
    >
      <Card :dis-hover="true" :shadow="true">
        <div
          v-for="(cate, index) in allResourceCate"
          :class="index === 0 ? 'top-line' : null"
          :key="'cate' + cate.id"
        >
          <Row class="table-layout" style="background: #f2f6fc">
            <Checkbox
              v-model="cate.checked"
              :indeterminate="isIndeterminate(cate.id)"
              @on-change="handleCheckAllChange(cate)"
            >
              {{ cate.name }}
            </Checkbox>
          </Row>
          <Row class="table-layout">
            <Col
              :span="8"
              v-for="resource in _getResourceByCate(cate.id)"
              :key="resource.id"
              style="padding: 4px 0"
            >
              <Checkbox
                v-model="resource.checked"
                @on-change="handleCheckChange(resource)"
              >
                {{ resource.name }}
              </Checkbox>
            </Col>
          </Row>
        </div>
      </Card>
      <div slot="footer">
        <Button type="primary" @click="handleSave()">保存</Button>
        <Button @click="handleClear()">清空</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { resourceCateDispatch, resourceDispatch } from '@/api/admin'

export default {
  name: 'alloc-resource',
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: true,
      showStatus: false,
      allResource: null,
      allResourceCate: null
    }
  },
  watch: {
    isShow() {
      this.showStatus = this.isShow
    }
  },
  methods: {
    init() {
      this._getAllResourceCateList()
    },
    _getAllResourceCateList() {
      resourceCateDispatch.use('getAll').then((res) => {
        this.allResourceCate = res.data
        this.allResourceCate.forEach((item) => {
          item.checked = false
        })
        this._getAllResource()
      })
    },
    _getAllResource() {
      resourceDispatch.use('getAll').then((res) => {
        this.allResource = res.data
        this.allResource.forEach((item) => {
          item.checked = false
        })
        this._getResourceByMenu()
      })
    },
    _getResourceByCate(cateId) {
      const cateResource = []
      if (this.allResource == null) return null
      this.allResource.forEach((item) => {
        const resource = item
        if (resource.cateId === cateId) {
          cateResource.push(resource)
        }
      })
      return cateResource
    },
    _getResourceByMenu() {
      const data = this.item.operations
      this.allResource.forEach((item) => {
        item.checked = this._getResourceChecked(item.id, data)
      })
      this.allResourceCate.forEach((item) => {
        item.checked = this.isAllChecked(item.id)
      })
      this.$forceUpdate()
    },
    isAllChecked(cateId) {
      const cateResources = this._getResourceByCate(cateId)
      if (cateResources == null) return false
      let checkedCount = 0
      cateResources.forEach((item) => {
        if (item.checked) checkedCount++
      })
      if (checkedCount === 0) {
        return false
      }
      return checkedCount === cateResources.length
    },
    _getResourceChecked(resId, allResource) {
      if (allResource === null || allResource.length === 0) {
        return false
      }
      for (let i = 0; i < allResource.length; i++) {
        if (allResource[i].id === resId) {
          return true
        }
      }
      return false
    },
    isIndeterminate(cateId) {
      const cateResources = this._getResourceByCate(cateId)
      if (cateResources == null) return false
      let checkedCount = 0
      cateResources.forEach((item) => {
        if (item.checked) checkedCount++
      })
      return !(checkedCount === 0 || checkedCount === cateResources.length)
    },
    handleClear() {
      this.allResourceCate.forEach((item) => {
        item.checked = false
      })
      this.allResource.forEach((item) => {
        item.checked = false
      })
      this.$forceUpdate()
    },
    handleCheckChange(resource) {
      this.allResourceCate.forEach((item) => {
        if (item.id === resource.cateId) {
          item.checked = this.isAllChecked(resource.cateId)
        }
      })
      this.$forceUpdate()
    },
    handleCheckAllChange(category) {
      const cateResources = this._getResourceByCate(category.id)
      cateResources.forEach((item) => {
        item.checked = category.checked
      })
      this.$forceUpdate()
    },
    handleSave() {
      this.$Modal.confirm({
        title: '是否分配资源？',
        onOk: () => {
          const menuId = this.item.id
          const resourceIds = []
          if (this.allResource != null && this.allResource.length > 0) {
            this.allResource.forEach((item) => {
              if (item.checked) {
                resourceIds.push(item.id)
              }
            })
          }
          resourceDispatch
            .use('allocResource', {
              menuId,
              resourceIds
            })
            .then((res) => {
              if (res.code === 200 && res.data) {
                this.$Message.success('分配成功！')
              } else {
                this.$Message.success('分配失败！')
              }
              this.$emit('editEvent')
              this.$emit('changeEvent', false)
            })
        },
        onCancel: () => {
          this.$Message.info('取消操作！')
        }
      })
    },
    cancel() {
      this.$emit('changeEvent', false)
      this.$Message.info('取消编辑！')
    }
  }
}
</script>

<style lang="scss" scoped>
.table-layout {
  padding: 10px;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}

.top-line {
  border-top: 1px solid #dcdfe6;
}
</style>
